<html>
<head></head>

<script type="text/javascript" src="./jquery.js"></script>
<style>
input[type="checkbox"] + label::before { content: '\a0'; /* non-break space */ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; }
input[type="checkbox"]:checked + label::before { content: '\2713'; background: yellowgreen; }
input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); }
</style>


<body>
<input type="checkbox" id="awesome" /> <label for="awesome">Awesome!</label>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
<script>
// setTimeout在规定时间后执行完某个操作就停止了
// setInterval则可以一直循环下去

var count = 60;


function customInterval(count){
	var timer = null
	// 然后执行
	var dofun= function(){ 
		if(count>0){
			$("#div1").empty().html(count);
		}else{
			clearInterval(timer);
		}
		count--;
	}
	
	// 先执行 
	return ()=>{
		timer = setInterval(dofun, 1000);	
	}
	
}


function customInterval2(shouldStop,done){
	var timer = null
	// 然后执行
	var dofun= function(){ 
		
		if(shouldStop()){
			clearInterval(timer);
		}else{
			done();
		}
	}
	
	// 先执行 
	return ()=>{
		timer = setInterval(dofun, 1000);	
	}
	
}

customInterval(count)();
var decrease=(count)=>{
	return ()=>{
		console.log(count);
		if(count>0){
			count--;
			return false;
		}
		return true;
	}
}
var doing=(count)=>{
	return ()=>{
		$("#div2").empty().html(count);
		count--;
	}
}
customInterval2(decrease(60),doing(60))();


function customInterval3(shouldStop){
	var timer = null
	// 然后执行
	var dofun= function(){ 
		if(shouldStop()){
			clearInterval(timer);
		}
	}
	
	// 先执行 
	return ()=>{
		timer = setInterval(dofun, 1000);	
	}
	
}

var doing2=(count)=>{
	return ()=>{
		if(count>0){
			$("#div3").empty().html(count);
			count--;
			return false;
		}
		return true;
	}
}

customInterval3(doing2(60))();

var doing3=(count)=>{
	return ()=>{
		if(count>0){
			$("#div4").empty().html(count);
			count--;
			return false;
		}
		return true;
	}
}

customInterval3(doing3(60))();

</script>
</html>